<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>字典管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-row class="search_row">
            <el-col :span="6" class="search_title">
              <div>标识:</div>
            </el-col>
            <el-col :span="18" class="scroll_input">
              <el-input
                  placeholder="请输入内容"
                  size="mini"
                  clearable
              >
              </el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <div class="search_row">
            <el-button type="primary" size="mini">搜索</el-button>
            <el-button type="success" size="mini" @click="addEdit({name:'添加',type:false })">添加</el-button>
          </div>

        </el-col>
      </el-row>
      <!-- 数据 -->
      <el-table :data="dictList" stripe size='mini'
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{background:'rgb(17,23,57)','text-align':'center'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="dictKey" label="字典标识"></el-table-column>
        <el-table-column prop="value" label="值"></el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            　<span v-if="scope.row.type=== 1">系统变量</span>
            　<span v-if="scope.row.type=== 2">用户变量</span>
            　<span v-if="scope.row.type=== 3">字典类型</span>
          </template>
        </el-table-column>
        <el-table-column prop="typeCodeName" label="类型编码"></el-table-column>
        <el-table-column prop="dictState" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.dictState=== 1">开启</span>
            　<span v-if="scope.row.dictState=== 2">关闭</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="描述"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-tooltip
                class="item"
                effect="dark"
                content="查看"
                placement="top-start"
                :enterable="false"
            >
              <el-button icon="el-icon-view" size="mini" @click="addEdit({name:'查看',type:true ,id:scope.row.id})"></el-button>
            </el-tooltip>
            <!-- 修改 -->
            <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top-start"
                :enterable="false"
            >
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="addEdit({name:'更新',type:false ,id:scope.row.id})"></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip
                class="item"

                effect="dark"
                content="删除"
                placement="top-start"
                :enterable="false"

            >
              <el-button type="danger" v-if="scope.row.type===2" icon="el-icon-delete" size="mini"
                         @click="del(scope.row.id)"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
      ></el-pagination>

    </el-card>
  </div>
</template>

<script>

import {queryDishesDictList,removeByIdDishesDict} from '../../api/dictApi'

export default {
  name: "dictList",
  data() {
    return {
      dictList: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      dictInfo: {
        page: {
          current: 1,
          size: 10
        }
      }
    }
  },
  methods: {
    // 监听每页展示的条数
    handleSizeChange(newSize) {
      this.dictInfo.page.size = newSize
      this.queryPage()
    },
    //监听页码
    handleCurrentChange(newCurrent) {
      this.dictInfo.page.current = newCurrent
      this.queryPage()
    },
    del(item) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeByIdDishesDict(item).then(res => {
         //if (res.code != 20000) this.$message.error(res.message)
          this.queryPage()
           return this.$notify({title: '成功', message: res.message, type: 'success'});
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    queryPage() {
      queryDishesDictList(this.dictInfo).then(res => {
       //if (res.code != 20000) this.$message.error(res.message)
        this.dictList = res.data.dataList.records
        this.page.total = res.data.dataList.total
        this.page.current = res.data.dataList.current
        this.page.size = res.data.dataList.size
      })
    },
    addEdit(res){
      this.$router.push({path:'/dictAddAndDict',query: { name: res.name,type:res.type,id:res.id }})
    }
  },
  created() {
    this.queryPage()
  },
  del(){

  }
}
</script>

<style lang="less" scoped>
.search_row {
  padding: 10px;

  .search_title {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    margin-bottom: 20px;
  }

  .scroll_input {
    height: 30px;
  }
}

</style>
